<template>
  <div class="input-item">
    <div class="label">{{ props.label }}</div>
    <div class="input">
      <div class="tags">
        <div class="tag"  v-for="(item, index) in [1,2,34,5,6,7,8,9]">
          <image></image>
        </div>
      </div>
      <slot name="next"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  label: String
})
</script>

<style scoped lang="scss">
.input-item {
  .label {
    height: 42rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #0D3333;
    line-height: 42rpx;
    margin: 0 0 16rpx 0;
    padding: 0 22rpx;
  }
  .input {
    display: flex;
    align-items: center;
    width: 100%;
    background: #FFFFFF;
    border-radius: 24rpx;
    .tags {
      display: flex;
      flex-flow: row wrap;
      align-items: center;
      gap: 16rpx;
      .tag {
        width: 204rpx;
        height: 204rpx;
        background: #FFFFFF;
        border-radius: 24rpx;
        border: 2rpx solid rgba(0,0,0,0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        image {
          width: 176rpx;
          height: 176rpx;
          border-radius: 24rpx;
        }
      }
    }
  }
}

</style>
